import React, { useCallback, useEffect, useState } from 'react';
import {
  Space,
  Button,
  Form,
  Input,
  Select,
  Drawer,
  Grid,
  Typography,
  InputNumber,
  Message,
} from '@arco-design/web-react';
import {
  manualsTypeOpt,
  OperateType,
} from '@/pages/manuals/educationManuals/common';
import { IconDelete } from '@arco-design/web-react/icon';

const FormItem = Form.Item;
const { Row, Col } = Grid;

function FormBox(props: any) {
  const { visible, handleChangeVisible, modalTitle, editData, formShowType } =
    props;
  const [form] = Form.useForm();
  const [childManuals, setChildManuals] = useState([]);
  //const [editTypeDisabled, setEditTypeDisabled] = useState(false);

  useEffect(() => {
    if (!visible) return;
    form.resetFields();
    if (formShowType === OperateType.Add) {
      form.setFieldsValue(editData);
      setChildManuals([]);
      //setEditTypeDisabled(false);
    } else {
      const data = {
        //Type: editData.Type,
        Sort: editData.Sort,
        Name: editData.Name,
      };
      form.setFieldsValue(data);
      setChildManuals(editData.ChildManuals);
      //setEditTypeDisabled(editData.HasContent);
    }
  }, [visible]);

  const addSecondLevel = () => {
    setChildManuals([
      ...childManuals,
      {
        ID: '',
        Name: '',
        Sort: 0,
      },
    ]);
  };

  const delChildManuals = useCallback(
    (index) => {
      childManuals.splice(index, 1);
      setChildManuals([...childManuals]);
    },
    [childManuals]
  );

  const onOk = () => {
    form.validate().then((value) => {
      const illegal = childManuals.some(
        (item) => !item.Name || isNaN(item.Sort)
      );
      if (illegal) {
        Message.error('请完善二级分类配置');
        return;
      }
      props.onConfirm &&
        props.onConfirm({
          ...value,
          ChildManuals: childManuals,
          Type: 0,
        });
    });
  };

  const onCancel = () => {
    props.onCancel && props.onCancel();
    form.resetFields();
    handleChangeVisible(false);
  };

  return (
    <Drawer
      title={modalTitle}
      visible={visible}
      onCancel={onCancel}
      autoFocus={false}
      focusLock={false}
      style={{ width: '600px' }}
      footer={
        <Space size="small">
          <Button type="primary" onClick={onOk}>
            保存
          </Button>
        </Space>
      }
    >
      <Form form={form} layout="vertical">
        {/*<FormItem
          label="类型"
          field="Type"
          rules={[{ required: true, message: '请输入用户账号' }]}
        >
          <Select options={manualsTypeOpt} disabled={editTypeDisabled}></Select>
        </FormItem>*/}
        <FormItem required style={{ marginBottom: 0 }}>
          <Row gutter={8}>
            <Col span={12}>
              <FormItem
                field="Name"
                label="一级分类"
                rules={[{ required: true, message: '请输入' }]}
              >
                <Input placeholder="请输入" autoComplete="off" />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem
                label="序号"
                field="Sort"
                rules={[{ required: true, message: '请输入' }]}
              >
                <InputNumber placeholder="请输入" autoComplete="off" />
              </FormItem>
            </Col>
          </Row>
        </FormItem>
        <div style={{ display: 'flex', marginTop: 20 }}>
          <Typography.Title heading={5}>二级分类配置</Typography.Title>
          <Button
            type="outline"
            style={{ marginLeft: 20 }}
            onClick={addSecondLevel}
          >
            新增二级分类
          </Button>
        </div>
        {childManuals.map((item, index) => {
          return (
            <FormItem required style={{ marginBottom: 0 }} key={item.ID}>
              <Row gutter={8}>
                <Col span={12}>
                  <FormItem
                    label={`二级分类${index + 1}`}
                    rules={[{ required: true, message: '请输入' }]}
                  >
                    <Input
                      placeholder="请输入"
                      value={childManuals[index].Name}
                      autoComplete="off"
                      onChange={(value) => {
                        childManuals[index].Name = value;
                        setChildManuals([...childManuals]);
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label="序号"
                    rules={[{ required: true, message: '请输入' }]}
                  >
                    <div style={{ display: 'flex' }}>
                      <InputNumber
                        placeholder="请输入"
                        value={childManuals[index].Sort}
                        autoComplete="off"
                        onChange={(value) => {
                          childManuals[index].Sort = value;
                          setChildManuals([...childManuals]);
                        }}
                      />
                      <Button
                        icon={<IconDelete />}
                        style={{ marginLeft: 10 }}
                        onClick={() => delChildManuals(index)}
                      ></Button>
                    </div>
                  </FormItem>
                </Col>
              </Row>
            </FormItem>
          );
        })}
      </Form>
    </Drawer>
  );
}

export default FormBox;
